<template>
  <div class="index-conntainer">
    <!-- <div class="head-card">
      <div class="avatar">
        <el-avatar :size="70" :src="avatar"></el-avatar>
      </div>
      <div class="head-card-content">
        <h2 class="title">{{ sayHi }}! {{ name }}, {{ t('indexPage.descTitle') }}</h2>
        <p class="desc">
          倾心关怀，专业医疗，为您健康护航！
        </p>
      </div>
    </div> -->
    <div class="LOGO" v-if="statistics_data">
      <div class="list el-card is-hover-shadow card">
        <div class="img">
          <img src="@/assets/yuyue.png" alt="">
        </div>
        <div class="box">
          <div class="number">{{ statistics_data.data.register }}</div>
          <div class="title">今日预约人数</div>
        </div>
      </div>
      <div class="list el-card is-hover-shadow card">
        <div class="img">
          <img src="@/assets/xiaofei.png" alt="">
        </div>
        <div class="box">
          <div class="number">{{ statistics_data.data.pay }}</div>
          <div class="title">今日消费人数</div>
        </div>
      </div>
      <div class="list el-card is-hover-shadow card">
        <div class="img">
          <img src="@/assets/jianka.png" alt="">
        </div>
        <div class="box">
          <div class="number">{{ statistics_data.data.visit }}</div>
          <div class="title">今日建卡人数</div>
        </div>
      </div>
      <div class="list el-card is-hover-shadow card">
        <div class="img">
          <img src="@/assets/shouru.png" alt="">
        </div>
        <div class="box">
          <div class="number">{{ statistics_data.data.money }}</div>
          <div class="title">今日总收入</div>
        </div>
      </div>
      <div class="list el-card is-hover-shadow card">
        <div class="img">
          <img src="@/assets/zhuyuan.png" alt="">
        </div>
        <div class="box">
          <div class="number">{{ statistics_data.data.report }}</div>
          <div class="title">今日住院人数</div>
        </div>
      </div>
    </div>
    <div style="margin-top: 15px;">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div style="height: 450px;" class="el-card is-hover-shadow card">
            <p class="echarts_title">近7日挂号预约情况</p>
            <div style="height: 90% ;width: 100%;" ref="homeLineRefs"></div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div style="height: 450px;" class="el-card is-hover-shadow card">
            <p class="echarts_title">近7日收益情况</p>
            <div style="height: 90% ;width: 100%;" ref="homeLineRef"></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div class="register el-card is-hover-shadow card">
            <span style="font-weight: 500;">实时挂号</span>
            <el-table :data="tableData" height="250" stripe :row-class-name="tableRowClassName">
              <el-table-column prop="date" align="center" label="头像" min-width="80">
                <template #default="scope">
                  <el-image :preview-src-list="srcList" style="width: 40px; height: 40px;border-radius: 100px;"
                    :src="scope.row.avatar" />
                </template>
              </el-table-column>
              <el-table-column prop="user_name" align="center" label="患者姓名" min-width="100" />
              <el-table-column prop="tel" label="患者手机号" align="center" min-width="130" />
              <el-table-column prop="depart_name" label="挂号科室" align="center" min-width="100" />
              <el-table-column prop="price" label="挂号科室" align="center" min-width="80" />
              <el-table-column prop="reser_time" label="挂号时间" align="center" min-width="170" />
            </el-table>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
          <div class="depart el-card is-hover-shadow card">
            <p>热门科室</p>
            <div class="header">
              <div>排名</div>
              <div>科室</div>
              <div>挂号量</div>
            </div>
            <div class="header" v-for="(item, index) in depart_data" :key="index">
              <div>
                <p :class="index == 0 ? 'one' : index == 1 ? 'two' : index == 2 ? 'three' : 'fow'">{{ index + 1 }}</p>
              </div>
              <div class="name"> <span>{{ item.name }}</span> </div>
              <div>{{ item.heat }}</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
          <div class="depart el-card is-hover-shadow card">
            <p>热门医生</p>
            <div class="header">
              <div>排名</div>
              <div>医生</div>
              <div>挂号量</div>
            </div>
            <div class="header" v-for="(item, index) in doctor_data" :key="index">
              <div>
                <p :class="index == 0 ? 'one' : index == 1 ? 'two' : index == 2 ? 'three' : 'fow'">{{ index + 1 }}</p>
              </div>
              <div class="name"> <span>{{ item.name }}</span> </div>
              <div>{{ item.heat }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
};
</script>
<script setup>
import { statistics, register } from '@/api/users';
import { depart } from '@/api/departMents';
import { doctor } from '@/api/doctor';
import { ref, reactive } from 'vue';
import * as echarts from 'echarts';
import Echarts from '@/components/Echarts/index.vue';

import packpage from '../../../package.json';
import { useI18n } from 'vue-i18n';
import { getResouceList } from '@/api/index';

import { createLogger, useStore } from 'vuex';


const tableData = ref([])
const store = useStore();
const statistics_data = ref();
const depart_data = ref();
const doctor_data = ref();

const box = () => {
  // 使用Promise.all()来同时处理多个异步操作
  Promise.all([
    statistics(),
    register(),
    depart(),
    doctor()
  ]).then(([statisticsRes, registerRes, departRes, doctorRes]) => {
    let array = []
    for(let i in registerRes.data){
      if(registerRes.data[i].status == 1 || registerRes.data[i].status == 2){
        array.push(registerRes.data[i])
      }
    }
    // 所有异步操作都完成后执行以下操作
    statistics_data.value = statisticsRes;
    tableData.value = array;
    depart_data.value = departRes.data.sort((a, b) => b.heat - a.heat).splice(0, 4);
    doctor_data.value = doctorRes.data.sort((a, b) => b.heat - a.heat).splice(0, 4);

    // 在数据准备好之后再初始化图表
    initLineChart();
    initLineCharts();
  }).catch((error) => {
    // 处理错误
    console.error('An error occurred: ', error);
  });
}
box()
// let aaa = sessionStorage.getItem('states')
// if (aaa==1) {
//   // box()
// }else{
//   // box()
// }
const homeLineRef = ref();

const homeLineRefs = ref();
const state = reactive({
  global: {
    homeChartOne: null,
    homeChartOnes: null,
    homeChartTwo: null,
    homeCharThree: null,
    dispose: [null, '', undefined],
  },
  homeOne: [
    {
      title: '用户累计交易额',
      title1: '元',
      number: '84405893',
      number1: '16',
      background1: '#4d61e2',
      background2: '#7183f0',
      background3: '#6ecc84',
    },
    {
      title: '用户数量',
      title1: '人',
      number: '405893',
      number1: '16',
      background1: '#4d9a8e',
      background2: '#4f92a4',
      background3: '#6ecc84',
    },
    {
      title: '累计支付笔数',
      title1: '',
      number: '3131',
      number1: '11',
      background1: '#4d61e2',
      background2: '#7183f0',
      background3: '#6ecc84',
    },
    {
      title: '分销商数量',
      title1: '人',
      number: '13',
      number1: '1',
      background1: '#4d9a8e',
      background2: '#4f92a4',
      background3: '#6ecc84',
    },
  ],
  homeThree: [
    {
      icon: 'iconfont icon-yangan',
      label: '浅粉红',
      value: '2.1%OBS/M',
      iconColor: '#F72B3F',
    },
    {
      icon: 'iconfont icon-wendu',
      label: '深红(猩红)',
      value: '30℃',
      iconColor: '#91BFF8',
    },
    {
      icon: 'iconfont icon-shidu',
      label: '淡紫红',
      value: '57%RH',
      iconColor: '#88D565',
    },
    {
      icon: 'iconfont icon-shidu',
      label: '弱紫罗兰红',
      value: '107w',
      iconColor: '#88D565',
    },
    {
      icon: 'iconfont icon-zaosheng',
      label: '中紫罗兰红',
      value: '57DB',
      iconColor: '#FBD4A0',
    },
    {
      icon: 'iconfont icon-zaosheng',
      label: '紫罗兰',
      value: '57PV',
      iconColor: '#FBD4A0',
    },
    {
      icon: 'iconfont icon-zaosheng',
      label: '暗紫罗兰',
      value: '517Cpd',
      iconColor: '#FBD4A0',
    },
    {
      icon: 'iconfont icon-zaosheng',
      label: '幽灵白',
      value: '12kg',
      iconColor: '#FBD4A0',
    },
    {
      icon: 'iconfont icon-zaosheng',
      label: '海军蓝',
      value: '64fm',
      iconColor: '#FBD4A0',
    },
  ],
  myCharts: [],
  charts: {
    theme: '',
    bgColor: '',
    color: '#303133',
  },
});

const initLineChart = () => {
  if (!state.global.dispose.some((b) => b === state.global.homeChartOne)) state.global.homeChartOne.dispose();
  state.global.homeChartOne = markRaw(echarts.init(homeLineRef.value, state.charts.theme));
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: statistics_data.value.data.price.time
    },
    yAxis: [{
      type: 'value',
      name: '单位(元)',
      min: 0,
      axisLabel: {
        formatter: '{value} 元'
      }
    }, {
      type: 'value'
    }],
    series: [
      {
        data: statistics_data.value.data.price.num,
        type: 'line'
      }
    ]
  }
  state.global.homeChartOne.setOption(option);
  state.myCharts.push(state.global.homeChartOne);
};
const initLineCharts = () => {
  if (!state.global.dispose.some((b) => b === state.global.homeChartOnes)) state.global.homeChartOnes.dispose();
  state.global.homeChartOnes = markRaw(echarts.init(homeLineRefs.value, state.charts.theme));
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: statistics_data.value.data.day.time,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '预约人数',
        min: 0,
        axisLabel: {
          formatter: '{value} 人'
        }
      },
      {
        type: 'value'
      }
    ],
    series: [
      {
        type: 'bar',
        barWidth: '60%',
        data: statistics_data.value.data.day.num
      }
    ]
  };
  state.global.homeChartOnes.setOption(option);
  state.myCharts.push(state.global.homeChartOnes);
};
// setTimeout(() => {
//   initLineChart();
//   initLineCharts()
// }, 500);

const tableRowClassName = ({
  row,
  rowIndex,
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}
// const { t } = useI18n();

// const hour = new Date().getHours();
// const thisTime =
//   hour < 8
//     ? t('sayHi.early')
//     : hour <= 11
//       ? t('sayHi.morning')
//       : hour <= 13
//         ? t('sayHi.noon')
//         : hour < 18
//           ? t('sayHi.afternoon')
//           : t('sayHi.evening');
// const sayHi = ref(thisTime);
// const avatar = ref('https://i.gtimg.cn/club/item/face/img/2/15922_100.gif');
// let data = JSON.parse(localStorage.getItem('data')).data
// const name = data.name
</script>

<style lang="scss" scoped>
.name {
  width: 100%;
}

.name span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.one {
  background-image: linear-gradient(#F58285, #F9C6CA);
}

.two {
  background-image: linear-gradient(#60DF86, #B3EFB6);
}

.three {
  background-image: linear-gradient(#FDAD66, #FDD4AA);
}

.fow {
  background-image: linear-gradient(#B6B6B6, #D6D6D6);
}

.header {
  display: flex;
  justify-content: space-between;
  line-height: 40px;
}

.header p {
  width: 40px;
  height: 40px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.header div {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.header img {
  width: 40px;
  height: 40px;
  border-radius: 100px;
}

.echarts_title {
  padding: 10px 20px;
  height: 10px;
  font-weight: 500;
}

.charts {
  width: 100%;
  height: 100%;
}

.depart {
  height: 300px;
  padding: 10px 20px;
  overflow: hidden;
}

.register {
  height: 300px;
  padding: 10px 20px;
  width: 100%;
}

.number {
  font-size: 18px;
  font-weight: 10000;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  width: 100%;
  font-size: 12px;
  color: #999999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.list {
  width: 15%;
  height: 70px;
  background-color: #ffffff;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list img {
  width: 70px;
  height: 70px;
  padding: 10px;
}

.img {
  width: 100px;
}

.box {
  width: 100%;
  height: 70px;
  text-align: center;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.LOGO {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.index-conntainer {
  width: $base-width;

  .head-card {
    display: flex;
    align-items: center;
    padding: $base-main-padding;
    background-color: $base-color-white;

    &-content {
      padding-left: 15px;

      .desc {
        color: $base-font-color;
      }
    }
  }

  .content {
    margin: 15px 0;

    .count-box {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .item {
        display: flex;
        flex-direction: column;
        text-align: center;

        .label {
          padding: 10px 0;
          font-size: $base-font-size-big;
        }

        .count {
          font-size: $base-font-size-max;
          font-weight: bolder;
          color: $base-color-primary;

          &.error {
            color: var(--el-color-danger);
          }

          &.success {
            color: var(--el-color-success);
          }
        }
      }
    }

    .title {
      margin: 0;
    }

    .skill-title {
      padding: 10px 0;
      font-weight: 500;
    }

    .card {
      margin-bottom: 15px;

      &-body {
        display: grid;
        grid-template-columns: repeat(4, 1fr);

        &.mobile {
          grid-template-columns: repeat(1, 1fr);
        }

        .item {
          box-sizing: border-box;
          padding: 10px 20px;
          margin-top: -1px;
          margin-left: -1px;
          overflow: hidden;
          cursor: pointer;
          border: 1px solid black;
          border: 1px solid #eee;
          transition: box-shadow 0.5;

          .lf {
            display: flex;
            align-items: center;
            max-width: 140px;

            .img {
              width: auto;
              max-width: 120px;
              height: auto;
              max-height: 40px;
            }
          }

          &:hover {
            box-shadow: $base-box-shadow;
          }

          .title {
            padding-left: 5px;
            font-size: 18px;
            font-weight: bold;
          }

          .desc {
            padding: 5px 0;
            font-size: 13px;
            line-height: 1.5;
            color: $base-font-color;
          }
        }
      }
    }
  }
}
</style>
